<html>
<head>
  <title>PURE Unobtrusive Rendering Engine</title>
  <script src="pure3.js"></script>
</head>
<body>
  <!-- HTML template -->
	It took:<span id="duration"></span>
	<ul class="template">
		<!--img /-->
		<li class="people">
			<span class="name"></span>
			<ul>
				<!--li class="winner">
					<a class="name"></a>
				</li-->
				<li class="team">
					<a class="name"></a>
				</li>
			</ul>
		</li>
	</ul>

  <script>
	function callback(json){
	    var start = new Date().getTime();

	    //declaration of the actions PURE has to do
	   var directive = {
			//'img@src':'http://farm8.staticflickr.com/7175/6470586439_11461583a7_s.jpg',
			/*'img@src':function(){
				return 'http://farm8.staticflickr.com/7175/6470586439_11461583a7_s.jpg';
			},*/
			//'img@src':'',
			'li.people':{
				'person<-people':{
//					'span.name':'person.name',
					'li.team':{
						'teamMember<-person.team':{
							'a.name':'teamMember.name',
							'a.name@href+':'teamMember.id'
						}
					}/*,
					'li.winner':{
						'winner<-winners':{
							'a.name':'winner.name',
							'a.name@href+':'winner.id'
						}
					}*/
				}
			}/*,
			'img@src':'http://farm8.staticflickr.com/7175/6470586439_11461583a7_s.jpg'*/
	   };

/*		var compiled = $p( 'ul.template' ).compile( directive );
			console.log( compiled( json ).outerHTML );*/
		
	   $p('ul.template').render( json, directive );
		document.getElementById('duration').innerHTML = ( new Date().getTime() - start ) + 'ms for ' + json.people.length + ' records';
		
	}
</script>
<script src="data.js"></script>
</body>
</html>